受託案件のデザインプロセスについて解説する
要求整理
要求整理のフレームワークとして、ユーザーストーリーマッピングを採用しています。
プロジェクトの最初期にチーム全員で集まり、ワークショップ形式でユーザーストーリーマッピングを作成します。
方法の詳細に関しては、Jeff Patton氏の開発した手法を概ね取り入れると言って良いかと思います。
ユーザーストーリーを作成することで、プロダクトやサービスの全体像をチーム全体で俯瞰的にUX設計することができます。
案件の予算や規模感にもよりますが、ユーザーストーリーの作成に伴って、必要に応じてペルソナ作成やユーザー/デザインリサーチ、アイディエーション、コンセプト作成等を行います。
ユーザーストーリーマッピング Jeff Patton (著)
ツール
リモート環境下でワークショップをすることが多くなって以来、Miroを使用しています。
スクラム開発
デザインプロセスの話とは少々ずれますが、開発手法としてスクラム開発を取り入れているため、前述のユーザーストーリーにおける各ストーリーが開発につながっていきます。
具体的にはユーザーストーリーマッピングで抽出した各ストーリーを元にPBIを作成します。
※ PBIの運用詳細に関しては開発に関する話になるため本稿では省きます。
また、ユーザーストーリーマッピングに関して、MVPのリリースラインを抽出した段階で破棄するのではなく、継続して運用します。
これは、ユーザーストーリーマッピンはリリースロードマップですので、その源流を成す「インクリメンタル思考で追加し続けよう」の考え方を取り入れています。
ストーリーの追加要件は様々ですが、例えば下記がそれにあたります
- PBIの実装時にユーザーに価値を与えるための追加アイデアが出た際
- スクラム開発におけるスプリントレビュー時に該当のストーリーにおいて追加で改善策が出た際
- プロダクトの計画に伴った新規ストーリーの大幅な追加
ただし、追加をする場合にはどのリリースラインにおいて実施をするかは別途検討を行い、必要に応じてスコープの見直しをします。
スケジュール
デザインのスケジュールに関しては、スクラム開発を取り入れているとはいえ、密に結合はされないことが多いです。また、案件によってはスクラム開発が開始する前に1~2カ月間のデザイン期間を取ります。
デザインタスクのポイント見積もりはしませんが、デザインに必要なことは開発スケジュールよりも先回りをすることです。
つまり、各PBIの開発着手までに関連するデザインをフィックスする必要があります。
ただし、実装を踏まえた上での完了条件が存在することが多いため、それらを満たしていることが条件になります。つまり、そのデザイン自体が最終的な、利用者が触れる完成形である必要はありません。
デザインの進行スケジュールは一般的なガントチャートのフォーマットを踏襲し、スプレッドシートで管理を行います。また、案件によっては直近の予定タスク/作業中タスクをわかりやすく可視化するためにTrelloを使用することもあります。
内訳はワイヤーフレーム・ビジュアルデザイン・デザインガイド等の作成が大まかな流れとなり、その中でストーリーに応じた分割を行います。
デザインMTG
基本的にはスクラム開発の各種MTGを主流としてデザインプロセスは進みますが、デザインに特化したミーティング（デザインMTG）を週次で実施することが多いです。
デザインMTGではデザインの検討をPOを中心とした開発チームが参加して実施します。
デザインMTG具体的には、下記の内容を扱います
- 進行中のデザインタスクのレビュー
- 進行中のデザインタスクのリアルタイムでの改善
- 開発者視点でのフィジビリティチェック
- 追加ストーリーの有無の確認
- ネクストアクションの確認
- スケジュール確認（調整）
マインドセット
デザインプロセスにおいても一部にアジャイルなマインドセットを取り入れています。
イテレーティブ/インクリメンタル
イテレーティブなプロセスで全体のデザインを行い、目的が明確なタスクをインクリメンタルに処理します。
※ 両者のアプローチはどちらが良い・悪いではなく、両方を場面場面で使い分けるものです。
Iterating and incrementing are separate ideas
発散・収束のダブルダイアモンド
プロジェクトのフェーズに従って、発散思考と収束思考を使い分けます。
脈略なくアイデアをたくさん出すことが必要な時もありますが、それらを収束させて具体的な形に落とし込む必要がある時もあります。
デザイナーのスタンスとしては、これらの思考を理解し使い分け、場合によっては拡散しすぎていれば収束に向かわせ、スケジュールを気にしすぎて安易にまとめようとしていることが感じられる場合などには、今一度アイデアが出やすいようににファシリテーションを通して促します。
5段階モデル
マインドセットとは言えないかもしれませんが、考え方としてはJesse James Garret氏のUXの5段階モデルを取り入れています。
5段階モデルはどちらかといえばウェブサイトのデザインが対象になると思われるところがあり、アプリケーションデザインには厳密にはマッピングできない部分もあります。ですが、その基本的な考え方は取り入れることができます。
The Elements of User Experience by Jesse James Garrett
UIデザイン
ユーザーストーリーマッピングによって要求整理されたタスク（ストーリー）をデザイン（グラフィック）ツールを用いて具現化していきます。
UIデザインでのプロセスは大まかには下記になります。
- デザインラフ（グラフィックツールを使用しますが、場合によっては手書きのラフを描きます）
- ワイヤーフレーム - プロトタイピング
- ビジュアルデザイン
- デザインガイド作成
プロセスとしては、多少語弊があるかもしれませんがワイヤーフレームにてプロトタイピングを行い、プロトタイプが固まった段階でヴィジュアルデザインを展開します。
また、プロトタイピングの段階で実装を考慮した、想定されるインタラクションの確認を行います。
デザインツール
グラフィックツールとしてはFigmaの利用を推奨しています。
現時点ではお客様がEditorとしてFigmaを利用することは少なく、主にViewer権限でのコメント機能の利用となります。
Editor（デザイナー）とViewer（非デザイナー）がリアルタイムに画面を通してコラボレーション/意思疎通できることで、スピーディーにデザインに関する合意を得ることができています。
Figma: the collaborative interface design tool.
Figmaの利用にはコラボレーション機能以外にも多様な利便性がありますが、個人的には下記の恩恵を受けています
- ソフトウェアのインストールが不要で、ブラウザ上で動作する、なおかつ軽快な操作感
- コンポーネント設計に寄り添った仕様
- アライメント設定等におけるコーディングとの連携
コンポーネント設計に関連して、Atomic Designを取り入れることもあります。
アウトプット（納品物）
多くの場合では、UIデザインに関するアプトプットとしてデザインファイル（Figファイル）が納品物となります。
デザインファイルには下記が含まれます。
- ワイヤーフレーム
- ビジュアルデザイン
- 各画面のデザイン
- アセット
- デザインガイド
- デザイントークン
- フォント
- スペーシング
- カラー 等
第三者レビュー
プロジェクトによっては、そのプロジェクトには関係しないメンバーによるレビューを実施します。
プロダクトに初めて触れるメンバーのユーザー視点から、客観的な意見を得ます。
ただし、安直に意見をそのまま取り入れるのではなく、得た意見からインサイトを得た上で、実際に改善に取り入れるかを判断します。
直近のテーマ
受託開発におけるデザインならではのテーマがあります。
良い/悪いとは言い切れない部分ですが、お客様ありきのデザインの場合はそのプロダクトデザインの最初期における、達成したいビジョンがUI要件として固まっていることがあります。
つまり、UX設計においてはUI設計の前段として各種の要求整理をする必要があるため、UI設計が固まっている場合にはUX設計まで遡る余地がない場合があります。
もちろん、お客さまの内部で検討を重ねられて作成されたアプトプットですので、目的に寄り添ったものとなっています。
しかし、UX設計においてはUXリサーチ等の画面作成以前の要求整理が必要となるため、もし必要に応じてそれらが行えない場合には最終的なアプトプットの品質向上/要件達成に制約が生じてしまうことがあります。
事業会社におけるプロダクト開発ではこういった制約が生じにくい性質があるかと思いますが、受託開発においてはしばしば生じる傾向があるかと思います。
ですので、可能な限り最上流工程からお客様に寄り添い協力させていただき、より良い体験を作っていくことが当面の目標でありテーマとなっています。
デザイナー採用応募はこちら デザイナーとしてジョインして、一緒に課題を解決していきたい方を現在大募集しています。
